<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/teacher_decorate.css">
    <!-- <link rel="stylesheet" href="./css/style.css"> -->
</head>

<body>
    <div class="container center " id="app">
        <form class="" >
            <input type="text" placeholder="请输入试卷标题" class="homework_title center" v-model="main_title">
            <div class="job" v-for="(item,index) in data">
                <span>{{index +1 + "."}}</span><span>{{item.title}}</span>
                <div class="job_options">   
                    <div v-if="item.A"><input type="checkbox" id="A" value="A">A: <p type="text"> {{ " " + item.A }}</p>
                    </div>
                    <div v-if="item.B"><input type="checkbox" id="B" value="B">B: <p type="text"> {{ " " + item.B }}</p>
                    </div>
                    <div v-if="item.C"><input type="checkbox" id="C" value="C">C: <p type="text"> {{ " " + item.C }}</p>
                    </div>
                    <div v-if="item.D"><input type="checkbox" id="D" value="D">D: <p type="text"> {{ " " + item.D }}</p>
                    </div>
                </div>
                <div v-if="!item.A&&item.right.length!==0"><span>请输入答案</span><textarea></textarea></div>
                <div v-if="!item.A&&item.right.length==0" class="file"><input type="file" name="" id=""></div>
                <button type="button" class="dle" v-bind="[index]" @click="del_questions(index)" onsubmit="return false">删除这个题目</button>
            </div>
        </form>
        <main>
            <h4>
                添加题目
            </h4>
            <div class="tabsbox" id="tab">
                <!-- tab 标签 -->
                <nav class="fisrstnav">
                    <ul>
                        <li @click="num=0,clear()" :class="{liactive:num==0}"><span>单选题</span><span
                                class="iconfont icon-guanbi"></span></li>
                        <li @click="num=1,clear()" :class="{liactive:num==1}"><span>多选题</span><span
                                class="iconfont icon-guanbi"></span></li>
                        <li @click="num=2" :class="{liactive:num==2}"><span>添加填空或者简答题</span><span
                                class="iconfont icon-guanbi"></span></li>
                        <li @click="num=3" :class="{liactive:num==3}"><span>提交文件</span><span
                                class="iconfont icon-guanbi"></span></li>
                    </ul>
                    <div class="tabadd">
                        <button @click="add_homework">保存试卷</button>
                    </div>
                </nav>

                <!-- tab 内容 -->
                <div class="tabscon">
                    <section class="conactive" :class="{activity:num==0}">
                        请输入标题： <input type="text" class="questions_title" v-model="title"><br>
                        <div class="option">
                            <div><input type="radio" name="select" value="A" v-model="right">A: <input type="text"
                                    v-model="A"></div>
                            <div><input type="radio" name="select" value="B" v-model="right">B: <input type="text"
                                    v-model="B"></div>
                            <div><input type="radio" name="select" value="C" v-model="right">C: <input type="text"
                                    v-model="C"></div>
                            <div><input type="radio" name="select" value="D" v-model="right">D: <input type="text"
                                    v-model="D"></div>
                            <button @click="add_questions">添加单选题</button>
                        </div>
                    </section>
                    <section class="conactive" :class="{activity:num==1}">
                        请输入标题： <input type="text" class="questions_title" v-model="title"><br>
                        <div class="option ipt">
                            <div class="checkbox"><input type="checkbox" id="A" value="A" v-model="right">A: <input for="A" type="text"
                                    v-model="A"></div>
                            <div><input type="checkbox" id="B" value="B" v-model="right">B: <input for="B" type="text"
                                    v-model="B"></div>
                            <div><input type="checkbox" id="C" value="C" v-model="right">C: <input for="C" type="text"
                                    v-model="C"></div>
                            <div><input type="checkbox" id="C" value="D" v-model="right">D: <input for="D" type="text"
                                    v-model="D"></div>
                            <br>
                            <button @click="add_questions">添加多选题</button>
                        </div>
                    </section>
                    <section class="conactive" :class="{activity:num==2}">
                        请输入标题： <input type="text" class="questions_title" v-model="title"><br>
                        <div class="options">
                            <span>请输入答案：</span> <input type="text" v-model="right">>
                            <button @click="add_questions">添加填空或者简答题</button>
                        </div>
                    </section>
                    <section class="conactive" :class="{activity:num==3}">
                        请输入标题： <input type="text" class="questions_title" v-model="title"><br>
                        <div class="options">
                            <span> 请提交作业：</span> <input type="file">
                            <button @click="add_questions">添加文件提交框</button>
                        </div>
                    </section>
                </div>
            </div>
        </main>
    </div>
</body>
<!-- <script src="./js/tab.js"></script> -->
<script src="../js/vue.js"></script>
<script src="../js/axios.js"></script>
<script src="./js/teacher_homework.js"></script>

</html>